<template>
    <div class="print"
         v-if="data">
        <div class="print-tableWrap">
            <table class="print-header">
                <caption>{{curTeam.name}}</caption>
                <tr>
                    <td class="right"
                        colspan="2">
                        单号：{{data.sn}}
                    </td>
                </tr>
                <tr>
                    <td>
                        订货单位：{{data.customer}}
                    </td>
                    <td class="right">
                        订货日期: {{data.order_time}}
                    </td>
                </tr>
                <tr>
                    <td>
                        地址：{{data.address}}
                    </td>
                    <td class="right">
                        交货日期: {{data.output_time}}
                    </td>
                </tr>
            </table>
            <table class="print-main">
                <thead>
                    <tr>
                        <th>项目类型</th>
                        <th>材质</th>
                        <th>宽高</th>
                        <th>规格</th>
                        <th>数量</th>
                        <th>平方数</th>
                        <th>单价</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>{{data.project}}</td>
                        <td>{{data.material}}</td>
                        <td>{{data.size}}</td>
                        <td>{{data.spec_name}}</td>
                        <td>{{data.count}}</td>
                        <td>{{data.cub_num}}</td>
                        <td>{{data.amount}}</td>
                    </tr>
                    <tr>
                        <td class="right"
                            colspan="7">合计：
                            <span class="danger">{{`￥${result}`}}</span>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="7"
                            class="right">
                            备注：
                            <span>{{data.remark}}</span>
                        </td>
                    </tr>
                </tbody>
            </table>
            <table class="print-main">
                <tr>
                    <th>客户</th>
                    <td>{{data.customer}}</td>
                    <th>联系方式</th>
                    <td colspan="3">{{data.link_phone}}</td>
                </tr>
                <tr>
                    <th>联系人</th>
                    <td>{{data.link_man}}</td>
                    <th>业务来源</th>
                    <td colspan="3">{{data.business_from}}</td>
                </tr>
                <tr>
                    <th>业务员</th>
                    <td>{{data.business_man}}</td>
                    <th>跟单员</th>
                    <td>{{data.merchandiser}}</td>
                    <th>预付款</th>
                    <td>{{`￥${data.imprest}`}}</td>
                </tr>
                <tr>
                    <td class="right"
                        colspan="6">收款账户：{{data.account}}</td>
                </tr>
            </table>
            <table>
                <tr>
                    <td>开单人:{{data.nice_name}}</td>
                    <td>审核人:{{data.applicants}}</td>
                    <td>制作主任：</td>
                    <td>确认：</td>
                </tr>
            </table>
        </div>
    </div>
</template>
<script>
export default {
    name: 'login',
    data() {
        return {
            data: null
        }
    },
    computed: {
        curTeam() {
            return this.$store.state.curTeam
        },
        result() {
            return this.data.amount * this.data.count
        }
    },
    methods: {
        setPrint(data) {
            this.data = data
        }
    },
    created() {
        this.$root.$on('setPrint', this.setPrint)
    },
    destroyed() {
        this.$root.$off('setPrint', this.setPrint)
    }
}
</script>
<style lang='less'>
.print {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 5000;
    width: 100vw;
    height: 100vh;
    background: #fff;

    &-tableWrap {
        width: 100%;
        margin: 20px auto;
        padding: 20px;
        table {
            width: 100%;
            border-collapse: collapse;
        }
    }

    &-header {
        caption {
            font-weight: 600;
            font-size: 16px;
            padding: 15px;
        }
        td {
            font-size: 14px;
        }
    }
    &-main {
        border: 1px solid #ddd;
        margin: 40px 0;
        td,
        th {
            text-align: center;
            padding: 10px;
            border-right: 1px solid #ddd;
            border-bottom: 1px solid #ddd;
        }
    }
    .right {
        text-align: right;
    }
}
</style>
